<template>
  <table id="tableComponent" class="table table-bordered table-striped">
    <thead>
      <tr>
        <!-- loop through each value of the fields to get the table header -->
        <th
          v-if="columns.indexOf('id') != -1"
          @click="
            sort = sort == 'asc' ? 'desc' : 'asc';
            this.$emit('filterUpdate', 'sort', sort);
          "
        >
          Id
          <i class="bi bi-sort-alpha-down" aria-label="Sort Icon"></i>
        </th>
        <th v-if="columns.indexOf('name') != -1">Название</th>
        <th v-if="columns.indexOf('inn') != -1">ИНН</th>
      </tr>
    </thead>
    <tbody>
      <!-- Loop through the list get the each student data -->
      <tr v-for="item in organizations" :key="item">
        <td v-if="columns.indexOf('id') != -1">{{ item["id"] }}</td>
        <td v-if="columns.indexOf('name') != -1">
          <router-link
            class="text-decoration-none"
            :to="'/organization/' + item['id']"
            >{{ item["name"] }}</router-link
          >
        </td>
        <td v-if="columns.indexOf('inn') != -1">{{ item["inn"] }}</td>
      </tr>
    </tbody>
  </table>
</template>
  <script>
export default {
  name: "TableOrganization",
  emits: ["filterUpdate"],
  props: {
    //
    organizations: {
      type: Array,
    },
    columns: {
      type: Array,
      default: function () {
        return ["id", "name", "inn"];
      },
    },
  },
  data() {
    return {
      sort: "desc",
    };
  },
};
</script>